<!doctype html>  
<html lang="es">

    <head>
        <meta charset="utf-8">

        <title>CID Secure</title>
        <link rel="stylesheet" href="css/demo.css">
        <link rel="stylesheet" href="css/estilos.css">

        <link rel="stylesheet" href="css/iview.css" />
        <link rel="stylesheet" href="css/skin 1/style.css" />

        <!--scripts animacion        -->

        <script src="js/iview.min.js"></script>
        <script src="js/iview.pack.js"></script>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.js"></script>
        <script type="text/javascript" src="js/raphael-min.js"></script>

        <script src="js/iview.js"></script>
        <script>
            $(document).ready(function(){
                $('#iview').iView({
                    pauseTime: 7000,
                    directionNav: false,                    
                    controlNav: true,
                    tooltipY: -15
                });
                $('#tweets').jQTwitter({
                    username: 'CIDsecureLoja',
                    count: 10,
                    show_image: true
                                    
                });
            });
        </script>
        <!--scripts twitter        -->
<!--        <script type="text/javascript" src="js/twitter/jQuery.js"></script>-->
        
        <script type="text/javascript" src="js/twitter/jquery.jQTwitter.js"></script>
    </head>
    <body>
        
        <div class="meny">
            <h2>Visita Tambi&eacute;n</h2>
            <ul>
                <li><a href="http://lab.hakim.se/avgrund/">Avgrund</a></li>
                <li><a href="http://lab.hakim.se/radar/">Radar</a></li>
                <li><a href="http://lab.hakim.se/forkit-js/">forkit.js</a></li>
                <li><a href="http://lab.hakim.se/scroll-effects/">stroll.js</a></li>
                <li><a href="http://lab.hakim.se/zoom-js">zoom.js</a></li>
                <li><a href="http://lab.hakim.se/reveal-js">reveal.js</a></li>
                <li><a href="http://itunes.apple.com/us/app/sinuous/id543097218">Sinuous for iOS</a></li>
                <li><a href="http://hakim.se/experiments/css/domtree/">DOM Tree</a></li>
                <li><a href="http://hakim.se/experiments/css/holobox/">Holobox</a></li>
                <li><a href="http://hakim.se/experiments/html5/404/netmag.html">404</a></li>
            </ul>
        </div>
        <div class="meny-arrow"></div>
        <div class="contents">
            <header>
                <figure><img src="images/Logo-Horizontal.png"></figure>
                <nav id="menu">
                    <ul id="sombra">
                        <li><a href="index.php">Inicio</a></li>
                        <li><a href="portafolio.html">Portafolio</a></li>
                        <li><a href="#">Clientes</a></li>
                        <li><a href="servicios.html">Servicios</a></li>
                        <li><a href="#">Cont&aacute;ctenos</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <div class="container">
                    <div id="iview">
                        <div data-iview:image="photos/photo1.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
                            <div class="iview-caption caption1" data-x="80" data-y="200">iView<sup>&trade;</sup></div>
                            <div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">The world's most awesome jQuery Image & Content Slider</div>
                            <div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft"><i>Presented by <b>Hemn Chawroka</b></i></div>
                        </div>

                        <div data-iview:image="photos/photo2.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="3000">
                            <div class="iview-caption caption5" data-x="60" data-y="280" data-transition="wipeDown">Captions can be positioned and resized freely</div>
                            <div class="iview-caption caption6" data-x="300" data-y="350" data-transition="wipeUp"><a href="#">Example URL-link</a></div>
                        </div>

                        <div data-iview:image="photos/video.jpg" data-iview:type="video" data-iview:transition="strip-right-fade,strip-left-fade">
                            <iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                            <div class="iview-caption caption2" data-x="450" data-y="340" data-transition="wipeRight">Video</div>
                            <div class="iview-caption caption3" data-x="600" data-y="345" data-transition="wipeLeft">Support</div>
                        </div>

                        <div data-iview:image="photos/photo3.jpg">
                            <div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">Some of iView's Options:</div>
                            <div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">Touch swipe for iOS and Android devices</div>
                            <div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">Image And Thumbs Fully Resizable</div>
                            <div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">Customizable Transition Effect</div>
                            <div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">Freely Positionable and Stylable Captions</div>
                            <div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">Cross Browser Compatibility!</div>
                        </div>

                        <div data-iview:image="photos/photo4.jpg">
                            <div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
                        </div>

                        <div data-iview:image="photos/photo5.jpg">
                            <div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">What are you waiting for?</div>
                            <div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">Get it Now!</div>
                        </div>
                    </div>
                </div>

            </article>
            <footer>
                <!--          son los wigets de redes sociales y eso  -->
                <div>
                    <section id="acerca">
                        <header>
                            <h3>Post recientes</h3>
                        </header>
                        <div id="texto">
                            <p>Somos una empresa dedicada a proveer servicios de seguridad .....</p>
                        </div>
                    </section>
                    <section id="otrosBlogs">
                        <header>
                            <h3>Twitter</h3>
                        </header>
                        <div id="texto">

                            <ul id="tweets">


                            </ul>


                        </div>

                    </section>
                    <section id="popular">
                        <header>
                            <h3>Facebook</h3>
                        </header>
                        <div id="texto">
                            <ul>
                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                <li><a href="#">Consectetur adipisicing elit, sed do eiusmod</a></li>
                                <li><a href="#">Duis aute irure dolor</a></li>
                                <li><a href="#">Excepteur sint occaecat cupidatat</a></li>
                            </ul>
                        </div>
                    </section>

                </div>

                <div id="autores">
                    <small>
                        Copyright &copy; 2012<br/>
                        Design & Development CIDsecure, Loja-Ecuador
                    </small>
                    <ul id="icons">
                        <li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Twitter"><img src="images/icon2.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="Picasa"><img src="images/icon3.jpg" alt=""></a></li>
                        <li><a href="#" class="normaltip" title="YouTube"><img src="images/icon4.jpg" alt=""></a></li>
                    </ul>
                </div>

            </footer>
        </div>
        

        <script src="js/meny.min.js"></script>
        <script>
            // Create an instance of Meny
            var meny = Meny.create({
                // The element that will be animated in from off screen
                menuElement: document.querySelector( '.meny' ),

                // The contents that gets pushed aside while Meny is active
                contentsElement: document.querySelector( '.contents' ),

                // [optional] The alignment of the menu (top/right/bottom/left)
                position: Meny.getQuery().p || 'left',

                // [optional] The height of the menu (when using top/bottom position)
                height: 200,

                // [optional] The width of the menu (when using left/right position)
                width: 260,

                // [optional] Distance from mouse (in pixels) when menu should open
                threshold: 40
            });

            // API Methods:
            // meny.open();
            // meny.close();
            // meny.isOpen();
			

            // Embed an iframe if a URL is passed in
            if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
                var contents = document.querySelector( '.contents' );
                contents.style.padding = '0px';
                contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
            }
        </script>

        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    </body>
</html>